<template>
  <!-- template就是vue组件中的结构部分 -->
  <!-- template 一定有且只有一个根元素（div标签） -->
<!-- <div class="box">123</div> -->
<div>
  <div class="father">
    <span>我的老哥{{brotherAge}}岁</span>
    <div class="son">我是{{sonAge>30?'年纪大了吃不了好吃的都给我吧':'还年轻他以后还有机会，还是给我吧'}}</div>
  <div class="box">{{test.uname.toUpperCase()}}</div>
  <div class="box">{{test.age*2}}</div>
</div>
</div>
</template>

<script>
// script这部分就是行为部分，js代码写在这里
// const a = 2
// console.log(a);
// vue组件的核心代码：可以到出当前vue组件
export default {
  // vue的组件部分中的配置项，需要大家记下来
// dsta属性必须是一个函数，这个函数要return一个对象，
  // data() {
  //   return {
  //     fatherAge: 55,
  //     sonAge: 31,
  //     test: {
  //       uname: '张三',
  //       age:12
  //     }
  //   }
  // }
  data() { 
    return {
      brotherAge: 55,
      sonAge: 23,
      test: {
        uname: '李四',
        age:2
      }
    }
  }
}
</script>

<style lang="less">
/* style 这部分就是样式部分。css代码写在这里 */
// less在脚手架内部已经配好了设置但是脚手架不会帮我安装这
// 个
.father{
  color:pink;
  .son{
   color:red;
  }
  .box{
    color:aqua;
  }
}
</style>
